<template>
    <div class="contentPage">
        <div class="pageTitle">爬虫状态</div>
        <div class="tableBox">
            <a-table :dataSource="params.dataSource" :columns="params.columns" row-key="id"
                     :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'login_status'">
                        <div :style="record.login_status === 0 ? 'color:red':''">{{record.login_status === 1 ? '正常' : '断联'}}</div>
                    </template>
                    <template v-if="column.dataIndex === 'pro'">
                        <div class="linkBtn"><a :href="record.jc_url">重连教程</a></div>
                    </template>
                </template>
            </a-table>
            <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page"
                          :total="params.total" @showSizeChange="onShowSizeChange" @change="onShowPageChange"/>
        </div>
    </div>
</template>
<script setup>
import {onMounted, reactive} from 'vue'
import {
    accountsLogList,
} from '../../../api/project.js'
const params = reactive({
    page: 1,
    pageSize: 10,
    total: 11,
    dataSource: [],
    columns: [
        {title: '平台', dataIndex: 'plamt_name', key: 'plamt_name'},
        {title: '最近一次数据获取时间', dataIndex: 'sync_at', key: 'sync_at'},
        {title: '状态', dataIndex: 'login_status', key: 'login_status'},
        {title: '操作重连', dataIndex: 'pro', key: 'pro'},
    ],
})
onMounted(() => {
    getList()
})
const onShowPageChange = (page) => {
    params.page = page
    getList()
}
const onShowSizeChange = (current, pageSize) => {
    params.pageSize = pageSize;
    getList()
}
const getList = () => {
    let data = {
        ...params.searchVal,
        page: params.page,
        pageSize: params.pageSize,
    }
    accountsLogList(data).then(res => {
        params.dataSource = res.data.items
        params.total = res.data.total
    })
}
</script>
<style scoped lang="less">
@import "./style.less";
</style>
